import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'package:flutter/material.dart';
class GridViewPage extends StatefulWidget {
  const GridViewPage({Key? key}) : super(key: key);

  @override
  State<GridViewPage> createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("gridView 基本使用"),
      ),
      body: GridView(
        // 设置 滑动方向
        // Axis.horizontal 水平方向 (左右 水平方向为主)
        // Axis.vertical 竖直方向 (上下 竖直方向为主)
        scrollDirection: Axis.vertical,
        padding: EdgeInsets.all(10),
        // 有回弹
        physics: BouncingScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 列数控制
          crossAxisCount: 3,
          // 列与列之间的间距 
          crossAxisSpacing: 10,
          // 行与行之间的距离
          mainAxisSpacing: 10
        ),
        children: [
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
          Container(color: Colors.blue,),
        ], 
        ),
    );
    
  }
}